import { Projection } from "../geo/Projection";
import { toLatLng } from "../geometry/LatLng";

export const drawImage = ({ ctx, image, x, y, w, h }) => {
  ctx.drawImage(image, x, y, w, h);
};




export const drawPoint = ({
  ctx,
  color = "#ff4f02",
  borderColor = "#000",
  borderWidth = 0,
  radius = 10,
  x,
  y,
}) => {

  ctx.beginPath();
  ctx.strokeStyle = borderColor;
  ctx.strokeWidth = borderWidth;
  ctx.lineWidth = borderWidth;
  ctx.fillStyle = color;

  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  if(borderWidth) ctx.stroke();
  ctx.fill();
  
};

export const drawText = ({
  ctx,
  x,
  y,
  marginTop = 0,
  marginLeft = 0,
  text,
  color = "#000",
  fontSize = 12,
  fontWeight = 400,
  textAlign = "center",
  strokeWidth = 0,
  strokeColor = "#fff",
} = {}) => {
  // ctx.beginPath();
  ctx.fillStyle = color;
  ctx.textAlign = textAlign;
  // "Microsoft YaHei";
  // sans-serif;
  // ctx.font = `normal ${fontWeight} ${fontSize}px Microsoft YaHei`;
  ctx.font = `${fontWeight} ${fontSize}px Microsoft YaHei`;
  ctx.strokeStyle = strokeColor;
  ctx.lineWidth = strokeWidth;
  strokeWidth && ctx.strokeText(text, x + marginLeft, y + marginTop);
  ctx.fillText(text, x + marginLeft, y + marginTop);
};

export const drawPolygon = ({
  ctx,
  coordinates,
  type = "polygon", // polygon polyline geo
  borderColor = "#000",
  borderWidth = 1,
  setLineDash = [100], // 可传入指譬如[3, 5]
  barckgroudColor = "#ccc",
  barckgroudColorHover = "",
  cursor = "default",
  projection,
}) => {
  if (type === "geo") {
    ctx.beginPath();
    coordinates.forEach((data) => {
      data.forEach((item, index) => {
        if (item.length > 2) {
          ctx.strokeStyle = borderColor;
          ctx.lineWidth = borderWidth;

          ctx.setLineDash(setLineDash);
          item.forEach((data2, i) => {
            const pos = projection.latLngToLayerPoint(
              toLatLng(data2[0], data2[1])
            );
            if (i === 0) {
              ctx.moveTo(
                pos.x + projection.office.x,
                pos.y + projection.office.y
              );
            }
            ctx.lineTo(
              pos.x + projection.office.x,
              pos.y + projection.office.y
            );
          });
          ctx.stroke();
          if (type === "polygon" || type === "geo") {
            if (projection.img2 && item.length === 261) {
              const pattern = ctx.createPattern(projection.img2, "repeat");
              ctx.fillStyle = pattern;
            } else if (projection.img && item.length === 408) {
              const pattern = ctx.createPattern(projection.img, "repeat");
              ctx.fillStyle = pattern;
            } else if (projection.img3 && item.length < 50) {
              const pattern = ctx.createPattern(projection.img3, "repeat");
              ctx.fillStyle = pattern;
            } else {
              ctx.fillStyle = barckgroudColor;
            }
            ctx.fill();

            let isPointIn = ctx.isPointInPath(
              projection.currMousePoint.x,
              projection.currMousePoint.y
            );
            if (isPointIn) {
              barckgroudColorHover && (ctx.fillStyle = barckgroudColorHover);
              ctx.fill();
              if (cursor) projection.canvas.style.cursor = cursor;
            }
          }
        }
      });
    });
  } else {
    if (coordinates.length > 1) {
      ctx.beginPath();
      ctx.strokeStyle = borderColor;
      ctx.lineWidth = borderWidth;
      ctx.setLineDash(setLineDash);
      coordinates.forEach((item, i) => {
        if (i === 0) {
          ctx.moveTo(item[0], item[1]);
        }
        ctx.lineTo(item[0], item[1]);
      });
      ctx.stroke();
      if (type === "polygon") {
        ctx.fillStyle = barckgroudColor;
        ctx.fill();
        // let isPointIn = ctx.isPointInPath(this.curMousePos.x, this.curMousePos.y);
        // if (isPointIn) {
        //   barckgroudColorHover && (ctx.fillStyle = barckgroudColorHover);
        //   ctx.fill();
        //   cursor
        //     ? (this.canvas.style.cursor = cursor)
        //     : (this.canvas.style.cursor = "defalut");
        // }
      }
    }
  }
};

export const drawGeoJson = ({ ctx, data, scale, projection }) => {


  // EPSG4326;
  /** 绘制边界 */
  data.features.forEach((item) => {
    drawPolygon({
      ctx,
      type: "geo",
      coordinates: item.geometry.coordinates,
      barckgroudColorHover: "#2D2D2D26",
      projection,
      cursor: 'pointer',
      barckgroudColor: '#ff4f020D'
      // cursor: 'pointer'
    });

    /** 绘制文字 */
    // if (
    //   item.properties.center &&
    //   item.properties.center.length == 2
    //   // && this.scale > 3
    // ) {
    //   drawText({
    //     ctx,
    //     text: item.properties.name,
    //     coordinate: item.properties.center,
    //   });
    // }
  });
};
